<template>
  <div class="md-item-class-component" @click="turnVideo">
    <img v-if="classInfo.cover" :src="`/video-dev${classInfo.cover}`" alt="">
    <p class="title ellipsis2">{{classInfo.title}}</p>
    <p class="one">{{classInfo.synopsis}}</p>
  </div>
</template>
<script>
export default {
  props: {
    classInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {}
  },
  computed: {
    isLogin () {
      return window.localStorage.getItem('isLogin')
    },
    userInfo () {
      return JSON.parse(window.localStorage.getItem('userInfo'))
    }
  },
  methods: {
    turnVideo () {
      if (this.isLogin) {
        console.log(this.classInfo,'this.classInfo');
        this.$router.push({
          path: '/courseDetail',
          query: {
            rid: this.classInfo.videoId
          }
        })
      } else {
        this.$confirm('是否去登录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({
            path: '/login'
          })
        }).catch(() => {});
      }
    }
  }
}
</script>
<style lang="less" scoped>
.md-item-class-component {
  position: relative;
  width: 272px;
  height: 270px;
  float: left;
  margin: 0 20px 20px 0;
  box-shadow: 0 4px 8px 0 rgba(95,101,105,.05);
  border-radius: 8px;
  background-color: #fff;
  transition: transform .2s,box-shadow .2s;
  cursor: pointer;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px 0 rgba(95,101,105,.1);
  }
  img {
    width: 100%;
    height: 152px;
    background: no-repeat center/cover;
    margin-bottom: 8px;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }
  .title {
    width: 100%;
    color: #545c63;
    line-height: 20px;
    height: 40px;
    margin-top: 8px;
    padding: 0 8px;
    &:hover {
      color: @md-primary-color;
    }
  }
  .ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .one, .two {
    font-size: 12px;
    color: #9199a1;
    line-height: 18px;
    padding: 0 8px;
    margin-bottom: 8px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>